<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{{asset('src/layui/css/layui.css')}}">
    <link rel="stylesheet" href="{{asset('src/css/client_chat.css')}}">
</head>
<body>
<div class="box">
{{--    <section class="header">--}}
{{--        <h3 id="addressee_name">正在连接中...</h3>--}}
{{--    </section>--}}
    <section class="chat_window">
        <span id="addressee_name">正在连接中...</span>
        {{--聊天记录--}}
    </section>
    <section class="input_box">
        <div class="button_box">
            <a href="javascript:void(0);">
                <img src="{{asset('src/images/system/tupian.png')}}" alt="" id="ID-upload-demo-btn">
            </a>
        </div>
        <textarea id="content" maxlength="240" placeholder="请输入内容..."></textarea>
    </section>
</div>
</body>

<script src="{{asset('src/js/jquery.js')}}"></script>
<script src="{{asset('src/layui/layui.js')}}"></script>
<script>

    layui.use(function () {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: "{{route('common.uploadFileObs')}}", // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            data: {'_token': '{{csrf_token()}}', 'dir': 'chat_records/content'},
            size: 4100,//最大允许上传的文件大小(单位KB)
            done: function (res) {
                console.log(res);
                // 若上传失败
                if (res.code != 200) {
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                sendImages(res.data.ol_url,res.data.url)//发送图片
            },
        });
    });

    scrollHeight();
    //将滚动条移动到底部
    function scrollHeight() {
        var element = $(".chat_window");
        element.scrollTop(element.prop("scrollHeight"));
    }

    //获取当前时间
    function getTime() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var time = hours + ':' + (minutes < 10 ? '0' + minutes : minutes);
        return time;
    }

    /**
     * 与GatewayWorker建立websocket连接，域名和端口改为你实际的域名端口，
     * 其中端口为Gateway端口，即start_gateway.php指定的端口。
     * start_gateway.php 中需要指定websocket协议，像这样
     * $gateway = new Gateway(websocket://0.0.0.0:8282
     */

    var bind_id;//发件人id(binding_records表id)
    var addressee_id;//收件人id(binding_records表id)



    /**
     * 第一步：与socket建立链接
     * 打开一个 web socket (以下链接方式任选一种即可)
     * 参数解释：var ws = new WebSocket("参数A://参数B:参数C");
     * 参数A：固定写法
     ws：表示http连接
     wss:表示https连接,有https证书的时候使用
     * 参数B：要连接的地址。
     可选参数：127.0.0.1 表示：本地地址
     可选参数：48.662.156.869 表示：你的云服务器的公网ip  （48.662.156.869这个ip是我假设的云服务器公网ip）
     可选参数：im_dev.liutong.pro 表示：这个你的http域名 如（http://im_dev.liutong.pro）
     可选参数：im.liutong.pro 表示：这个是你的https网址域名 如（https://im.liutong.pro）
     * 参数C：端口号
     端口号是可以自定义的（注意取值范围）。记得在服务器->实例安全组中进行放行。
     端口号取值范围：端口不能大于65535，请确认端口没有被其它程序占用，否则启动会报错。如果端口小于1024，需要root权限运行GatewayWorker才能有权限监听，否则报错没有权限。(详情参见手册->《Gateway类的使用》->"初始化"->"ip")
     注意：这里的端口号必须和你在 "项目名\GatewayWorker\Applications\YourApp\start_gateway.php" 中$gateway = new Gateway("websocket://0.0.0.0:8282");这段代码的端口号保持一致。
     */
        // var ws = new WebSocket("ws://127.0.0.1:8282");//进行webSocket的几种方式（方式A：常规操作）
        // var ws = new WebSocket("ws://47.104.249.193:8282");//进行webSocket的几种方式（方式B：使用本机公网ip进行连接）
        // var ws = new WebSocket("ws://jim.liutong.pro:8282");//进行webSocket的几种方式（方式C:使用http://jim.liutong.pro的方式进行连接）
    var ws = new WebSocket("{{config('gateway_worker.ws_url')}}");//进行webSocket的几种方式（方式C:使用http://jim.liutong.pro的方式进行连接）
    // 服务端主动推送消息时会触发这里的onmessage

    //检测websocket是否链接
    ws.onopen = function () {
        console.log("连接成功");
    };

    // 关闭 websocket
    ws.onclose = function () {
        console.log("连接已关闭...");
    };

    ws.onmessage = function (e) {
        // json数据转换成js对象
        var data = eval("(" + e.data + ")");
        var type = data.type || '';
        var html = ""
        console.log('data=',data,'type=',type);
        // console.log(type,222);
        // console.log(data.addressee_id == bind_id,333);
        switch (type) {
            // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
            case 'init':
                // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                binding(data.client_id)
                break;
            case 'text'://监听文字类型消息
                //朋友来消息了
                //收件人id==当前登录用户id
                if (data.bind_id != bind_id) {
                    console.log('text=' + data.content);
                        html = " <div class=\"msg_box \">\n" +
                            "            <div class=\"pic\">\n" +
                            "                <img src=\"{{asset('src/images/system/pic_2.png')}}\" alt=\"\">\n" +
                            "                <span>"+getTime()+"</span>\n" +
                            "            </div>\n" +
                            "            <div class=\"msg\">\n" +
                            "                <p>"+data.content+"</p>\n" +
                            "            </div>\n" +
                            "        </div>";
                }
                break;
            case 'images'://监听图片类型消息
                //朋友来消息了
                //收件人id==当前登录用户id
                if (data.bind_id != bind_id) {
                    console.log('images=' + data.content);
                    html = " <div class=\"msg_box \">\n" +
                        "            <div class=\"pic\">\n" +
                        "                <img src=\"{{asset('src/images/system/pic_2.png')}}\" alt=\"\">\n" +
                        "                <span>"+getTime()+"</span>\n" +
                        "            </div>\n" +
                        "            <div class=\"msg\">\n" +
                        "                <a href=\""+data.content.ol_url+"\" target=\"_blank\">\n" +
                        "                    <img src=\""+data.content.ol_url+"\" alt=\"\">\n" +
                        "                </a>\n" +
                        "            </div>\n" +
                        "        </div>";
                }
                break;
            // 当mvc框架调用GatewayClient发消息时直接alert出来
            default :
                //如果报400状态 token异常就刷新页面
                if (data.status == 400){
                    setTimeout(function(){
                        // 这里是需要暂停1.5秒后执行的代码
                        window.location.reload()
                    }, 1500);
                    // layer.msg('连接失败,请刷新页面后再试')
                }
        }
        $('.chat_window').append(html);
        scrollHeight()
    };

    /**
     * 初始化绑定用户
     * @param string client_id gatwaywork给的用户id
     */
    function binding(client_id) {
        $.ajax({
            url: "{{route('chat.binding')}}", // 请求的 URL
            type: 'POST', // 请求方法
            data: {
                '_token': '{{csrf_token()}}',
                'client_id': client_id,//wensocket临时id标识
                'user_id': "{{$user_id}}",//当前登录的用户id
                'addressee_id': "{{$addressee_id}}",//收件人id
                'role': 2,//用户角色|1:客服,2:用户
            },
            dataType: 'json', // 响应数据类型
            success: function (res) { // 请求成功的回调函数
                if (res.code != 200) {
                    return layer.msg(res.msg);
                }
                bind_id = res.data.bind_id//当前登录用户id
                addressee_id = res.data.addressee_id//收件人id
                addressee_name = res.data.addressee_name//收件人昵称
                $('#addressee_name').text('用户#' + addressee_name)
            },
            error: function (xhr, status, error) { // 请求失败的回调函数
                console.log(error);
            }
        });

    }

    /**
     * 发送文字消息
     */
    //监听回车事件
    $('#content').keydown(function (event) {
        if (event.keyCode == 13) {
            // 回车键被按下
            let content = $('#content').val()

            if (!content) {
                alert('请输入内容');
                return false;
            }

            $.ajax({
                url: "{{route('chat.sendMassage')}}", // 请求的 URL
                type: 'POST', // 请求方法
                data: {
                    '_token': '{{csrf_token()}}',
                    'bind_id': bind_id,//当前用户id
                    'addressee_id': addressee_id,//收件人id
                    'type': 'text',//消息类型
                    'role': 2,//用户身份,1:客服,2:用户
                    'content': content,//消息内容
                },
                dataType: 'json', // 响应数据类型
                success: function (res) { // 请求成功的回调函数
                    console.log(res);
                    let html = "<div class=\"msg_box right_msg_box\">\n" +
                        "            <div class=\"msg\">\n" +
                        "                <p>" + content + "</p>\n" +
                        "            </div>\n" +
                        "            <div class=\"pic\">\n" +
                        "                <img src=\"{{asset('src/images/system/pic_1.png')}}\" alt=\"\">\n" +
                        "                <span>" + getTime() + "</span>\n" +
                        "            </div>\n" +
                        "        </div>"
                    $('.chat_window').append(html)
                    $('#content').val('')
                    scrollHeight()//将滚动条移动到底部
                },
                error: function (xhr, status, error) { // 请求失败的回调函数
                    console.log(error);
                }
            });
        }
    });

    //发送图片类型请求
    function sendImages(ol_url,url) {
        if (!ol_url || !url) {
            layer.msg('发送图片失败');
            return false;
        }
        $.ajax({
            url: "{{route('chat.sendMassage')}}", // 请求的 URL
            type: 'POST', // 请求方法
            data: {
                '_token': '{{csrf_token()}}',
                'bind_id': bind_id,//当前用户id
                'role':2,//用户角色|1:客服,2:用户
                'addressee_id':addressee_id,//收件人id
                'type':'images',//消息类型
                'content':{'ol_url':ol_url,'url':url},//消息内容
            },
            dataType: 'json', // 响应数据类型
            success: function (res) { // 请求成功的回调函数
                console.log(res);
                if (res.code != 200){
                    return layer.msg('发送失败');
                }
                let html = "<div class=\"msg_box right_msg_box\">\n" +
                    "            <div class=\"msg\">\n" +
                    "                <a href=\"" + ol_url + "\" target=\"_blank\">\n" +
                    "                    <img src=\""+ ol_url +"\" alt=\"\">\n" +
                    "                </a>\n" +
                    "            </div>\n" +
                    "            <div class=\"pic\">\n" +
                    "                <img src=\"{{asset('src/images/system/pic_1.png')}}\" alt=\"\">\n" +
                    "                <span>" + getTime() + "</span>\n" +
                    "            </div>\n" +
                    "        </div>";
                $('.chat_window').append(html);
                scrollHeight()//将滚动条移动到底部
            },
            error: function (xhr, status, error) { // 请求失败的回调函数
                console.log(error);
            }
        });

    }
</script>
</html>
